import React from 'react';
import styled from 'styled-components';

const Button = styled.a`
  text-transform: uppercase; 
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  transition: 0.6s;
  text-align: center;
  max-width: 280px;
  font-size: 24px;
  padding: 0.5rem 2rem;
  border: 2px solid #c4c4c4;
  color: #c4c4c4;
  cursor: pointer;

  margin: ${props => props.center? '0 auto' : '0'};

  &:hover {
    color: #121212;
    background-color: #c4c4c4;
  }
`;

export const CallButton = (props) => {
  return (
    <Button href={ props.url} center>_{ props.label }_</Button>
  );
}
